.moveable-control {
  position: absolute;
  //width: var(--ss) !important;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
  background: var(--drag-h-color) !important;
  margin-top: -7px;
  margin-left: -7px;
  z-index: 10;
}

//左上
.moveable-nw {
  border-radius: 0 !important;
  width: var(--width) px !important;
  height: 20px !important;
  margin-left: -10px !important;
  margin-top: -10px !important;
  background: transparent !important;
  border: none !important;

  &:before {
    content: " ";
    width: var(--width);
    height: 3px;
    position: absolute;
    background: var(--drag-h-color);
    left: 9px;
    top: 9px;
  }

  &:after {
    content: " ";
    width: 3px;
    height: 20px;
    position: absolute;
    background: var(--drag-h-color);
    left: 9px;
    top: 9px;
  }
}


//右上
.moveable-ne {
  border-radius: 0 !important;
  width: 20px !important;
  height: 20px !important;
  margin-left: -10px !important;
  margin-top: -10px !important;
  background: transparent !important;
  border: none !important;

  &:before {
    content: " ";
    width: 20px;
    height: 3px;
    position: absolute;
    background: var(--drag-h-color);
    left: -9px;
    top: 9px;
  }

  &:after {
    content: " ";
    width: 3px;
    height: 20px;
    position: absolute;
    background: var(--drag-h-color);
    left: 8px;
    top: 9px;
  }
}

//左下
.moveable-sw {
  border-radius: 0 !important;
  width: 20px !important;
  height: 20px !important;
  margin-left: -10px !important;
  margin-top: -10px !important;
  background: transparent !important;
  border: none !important;

  &:before {
    content: " ";
    width: 20px;
    height: 3px;
    position: absolute;
    background: var(--drag-h-color);
    left: 9px;
    top: 8px;
  }

  &:after {
    content: " ";
    width: 3px;
    height: 20px;
    position: absolute;
    background: var(--drag-h-color);
    left: 9px;
    top: -9px;
  }
}

//右下
.moveable-se {
  border-radius: 0 !important;
  width: 20px !important;
  height: 20px !important;
  margin-left: -10px !important;
  margin-top: -10px !important;
  background: transparent !important;
  border: none !important;

  &:before {
    content: " ";
    width: 20px;
    height: 3px;
    position: absolute;
    background: var(--drag-h-color);
    left: -9px;
    top: 8px;
  }

  &:after {
    content: " ";
    width: 3px;
    height: 20px;
    position: absolute;
    background: var(--drag-h-color);
    left: 8px;
    top: -9px;
  }
}

// 左中
.moveable-w {
  border-radius: 0 !important;
  width: 3px !important;
  height: 20px !important;
  margin-left: -1px !important;
  margin-top: -10px !important;
  background: transparent !important;
  border-left: solid 3px var(--drag-h-color) !important;
  border-bottom: none !important;
  border-top: none !important;
  border-right: none !important;
}

// 上中
.moveable-n {
  border-radius: 0 !important;
  width: 20px !important;
  height: 3px !important;
  margin-left: -10px !important;
  margin-top: -1px !important;
  background: transparent !important;
  border-top: solid 3px var(--drag-h-color) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

// 右中
.moveable-e {
  border-radius: 0 !important;
  width: 3px !important;
  height: 20px !important;
  margin-left: -2px !important;
  margin-top: -10px !important;
  background: var(--drag-h-color) !important;
  border: none !important;
}

// 下中
.moveable-s {
  border-radius: 0 !important;
  width: 20px !important;
  height: 3px !important;
  margin-left: -10px !important;
  margin-top: -2px !important;
  background: transparent !important;
  border-bottom: solid 3px var(--drag-h-color) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

// 中间
.moveable-origin {
  background: transparent !important;
  border: none !important;
}

.moveable-origin:before {
  content: " ";
  width: 1px;
  height: 7px;
  position: absolute;
  background: var(--drag-h-color);
  left: 6px;
  top: 3px;
}

.moveable-origin:after {
  content: " ";
  width: 7px;
  height: 1px;
  position: absolute;
  background: var(--drag-h-color);
  left: 3px;
  top: 6px;
}

.moveable-line {
  //background: transparent !important;
  //border-bottom: 1px dashed var(--drag-h-color);
}

.moveable-rotation {
  height: calc(20px * var(--zoom)) !important;

  .moveable-rotation-line {
    //margin-left: -1px;
    //border-right: 1px dashed var(--drag-h-color);
  }

  .moveable-rotation-control {
    border: none !important;
    width: 10px !important;
    height: 10px !important;
    margin-left: -5px !important;
  }

}

